複習 HTTP 協定

我們在第六天：認識網站，安裝了chrome瀏覽器，並且在第九天：作一個最簡單的 Rails 網站成功架好一個 Rails 網站。

我們可以透過 Chrome 的開發人員工具來觀察瀏覽器開啟一個網頁的過程。

認識 Chrome 開發人員工具

從昨天結束的地方繼續，先開啟 rails server 之後開啟 http://localhost:3000/。

按下 F12 或 Ctrl+Shift+I，就可以叫出開發人員工具。

這個畫面有點複雜，總之先按這裡的X，把多餘的部分關掉。

按了之後應該會看起來像這樣：

開發人員工具有很多的功能，我們只需要用到其中的一小部分，這裡就不一一介紹。

請先切換到 Network 分頁。

一個複雜的介面，但是什麼資料都沒有顯示，那是因為開發人員工具開啟後才會開始監控數據，所以我們要重開網頁，這裡按下 Ctrl+R。

出現了兩筆資料，一個是 localhost，另一個是 favicon.ico，我們點 localhost。

我們看見這裡有四個分頁：Headers、Preview、Response、Timing，我們只需要認識 Headers 和 Response。

Headers

Headers 這裡的資料也很多，我們只需要認識其中的三項：

• Request URL:http://localhost:3000/
• Request Method:GET
• Status Code:304 Not Modified

接下來就一項一項講解。

Request URL

請求網址：就是你在瀏覽器上輸入的網址，因為你輸入的是 http://localhost:3000/，所以他顯示 http://localhost:3000/。

Request Method

請求方法：瀏覽器希望網頁伺服器做些什麼事，我們這裡是用 GET 是表示我們想要下載檔案。

除了 GET 之外，還有其他的請求方法可以使用，比方說 POST、PUT、DELETE，以下是各個請求方法的用途：

• GET：下載檔案
• POST：上傳資料
• PUT：更新資料
• DELETE：刪除資料

舉個例：當你想在論壇發文，你把文章標題和內文填好，按下送出時，那就應該是一個 POST 請求方法。

依照目前可公開的情報，我們只需要知道 GET 和 POST 即可。

Status Code

狀態碼：是網頁伺服器用一個數字來表示瀏覽器提出的請求最後有沒有完成，如果沒有，為什麼沒有。其實提款機也有類似的東西，叫做訊息代碼。

當然這個狀態碼列出來會有很多，但因為我們只是要做一個聊天機器人，不需要認識全部，我們現階段只認識必須認識的那些。最主要的是你必須知道有狀態碼的存在，當你知道有狀態碼這種東西時，你需要相關資訊時就能在 Google 搜尋時輸入正確的關鍵字。

正式版說明：

• 200：表示成功。
• 304：表示瀏覽器已經有一模一樣的檔案。
• 400：瀏覽器發出的請求被網頁伺服器拒收，通常是發出的請求格式不正確。
• 404：找不到網頁。
• 500：網頁伺服器掛了。

網頁伺服器擬人：

• 200：網頁伺服器：「好哦～好哦～」
• 304：網頁伺服器：「你手上的檔案是最新的。」
• 400：網頁伺服器：「駁回！」
• 404：網頁伺服器：「你想找的東西不在我這。」
• 500：網頁伺服器：「阿阿我要壞掉惹。」

Response

又稱為 Response Body(回應內容)：指的是網頁伺服器回應給瀏覽器的內文部分。

其實就是檔案內容的部分。

HTTP 總結

• 由瀏覽器發給網頁伺服器的請求稱為 HTTP Request，HTTP Request 包含 Header 和 Body。
• 由網頁伺服器回應瀏覽器的請求稱為 HTTP Response，HTTP Response 也包含 Header 和 Body。
• Request Header 中的 Request Method 表示瀏覽器希望網頁伺服器做些什麼事。
• Response Header 中的 Status Code 表示網頁伺服器告訴瀏覽器事情辦好沒。

接下來我們從網頁伺服器的角度來觀察 HTTP Request 和 HTTP Response，但這需要寫點程式，所以我們明天會先從認識 Ruby 程式語言開始。